"use strict"
import "../../lib/ramda.js"
import fui,{$} from "../../lib/fui.js"

const PC_PAGEWIDTH_RATE = 0.55
const TEMPLATE = {
    pbox: $("ux-template#pbox").html(),
}

const State = {
    fui_root: null,
}

function page_game(dom, root, io) {
    function game_area(dom) {
        const dom_pboxs = []
        for (let row = 1; row < 16; row += 1) {
            const row_pboxs = []
            for (let col = 1; col < 14; col += 1) {
                const html = TEMPLATE.pbox.replace("[ROW]",row).replace("[COL]",col)
                dom.append(html)
                const dom_pbox = dom.children().last()
                row_pboxs.push(dom_pbox)
            }
            dom_pboxs.push(row_pboxs)
        }
        root.frame_join(dom, ()=>{
        })
    }
    game_area(dom.children("#game-area"))
}


function on_frame() {
    State.fui_root.on_frame()
}

function events(io) {
    $(".pbox").on("click", function(e){
        const dom = $(e.target)
        //event_push("tap-piece", [y,x])
    })
    $("#cmd-reset").on("click", function(){
        io.on_cmd_reset()
    })
}

function init(io) {
    if ("pc" == fui.adaption_mobile_width(PC_PAGEWIDTH_RATE)) {}
    const fui_root = new fui.FrameSystem
    page_game($("#page-game"), fui_root, io)
    events(io)
    State.fui_root = fui_root
}

export default {
    init,
    on_frame,
}
